import React from 'react'
import "./index.css"
import { nanoid } from 'nanoid';

export default function Header({ setTodoList, todoList }) {

  // console.log(settodoList);
  // console.log(todoList);

  //发布事件函数
  const publishHandle = (e) => {
    //判断是否点击的是回车
    if (e.keyCode !== 13) return;

    //获取输入的内容,判断是否输入为空
    const publishValue = e.target.value.trim();
    if (!publishValue) return alert("请输入正确的内容");

    //创建新的todo对象
    const newTodo = { id: nanoid(), todo: publishValue, done: false }

    //调用父组件传递过来的改变todolist的方法 把newTodo添加进入
    setTodoList([newTodo, ...todoList])

    //清空输入框 
    e.target.value = ""
  }


  // const publishHandle = (e) => {
  //   //限制输入框内容
  //   if (e.keyCode !== 13) return
  //   //当前输入框的值
  //   const publishVlue = e.target.value.trim()
  //   if (!publishVlue) return alert("不能为空")

  //   //添加数据
  //   //原数据 是一条条对象 
  //   const newTodo = { id: nanoid(), todo: publishValue, done: false }
    // 调用原函数 将原来的数据 覆盖 合并
  //   settodoList([newTodo, ...todoList])
  //   //清空输入框 
  //   e.target.value = ""

  // }





  //因为要按键盘触发发布事件所以绑定键盘抬起事件
  return (
    <div className="todo-header">
      <input type="text" onKeyUp={publishHandle} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
